<template>
	<view class="container">
		<!-- 导航栏 -->
		<uni-nav-bar :fixed="true" leftIcon="left" :border="false" backgroundColor="#F5F5F5"
			:title="Title" @clickLeft="HandleClickLeft" @clickRight="HandleClickRight"></uni-nav-bar>
		<!-- 内容 -->
		<view class="ConentBox">
			<view class="LeftBox">
				<scroll-view scroll-y="true" class="ScrollViewLeft">
					<view class="LeftListItem" v-for="(item,index) in categoryList" :key="index" @click="HandleLeft(index)">
						<view class="BorderBox" :class="index === LeftIndex ? '':'BorderBoxNo'"></view>
						<view class="TextBox" :style="{color:index === LeftIndex ? '#e5353f':'#000000'}">
							{{item.categoryName}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="RightBox">
				<scroll-view scroll-y="true" class="ScrollViewReft">
					<view class="RightItemBox">
						<view class="TitleBox">
							分类
						</view>
						<view class="ClassConentBox" v-if="categoryList[LeftIndex] && categoryList[LeftIndex].childs">
							<view 
								class="ClassListItemBox" 
								v-for="(item,i) in categoryList[LeftIndex].childs" :key="i"
								@click="toIndex(item)">
								{{item.categoryName}}
							</view>
							
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import {
		getCategoryList
	} from '@/api/Novel.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 导航栏标题
	const Title = ref("")
	// 一级分类选中下标
	const LeftIndex = ref(0)
	
	// 返回上一页
	const HandleClickLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	// 跳转到搜索页
	const HandleClickRight = () => {
		uni.navigateTo({
			url:'/pages/search/search'
		})
	}
	
	interface CategoryType {
		id: number,
		categoryName: string,
		sort: number,
		pid: number,
		cateLevel: string,
		[prop: string]: any
	}
	let pageInfo = reactive<{pageNum: number, pageSize: number, total: number}>({
		pageNum: 1,
		pageSize: 100,
		total: 0
	})
	// 分类数据
	let categoryList = ref<CategoryType[]>([]);
	const getCategoryLists = async() => {
		let res:any = await getCategoryList({
			pageNum: pageInfo.pageNum,
			pageSize: pageInfo.pageSize,
		});
		categoryList.value = getCategoryData(res?.rows);
	}
	
	// 分类解析
	const getCategoryData = (list:CategoryType[]) => {
		let data = list.filter(ele => ele.cateLevel == '1');
		data.forEach(item => {
			let ls = list.filter(ele => item.id == ele.pid);
			if(item.childs) {
				item.childs.push(...ls);
			} else {
				item.childs = ls || [];
			}
		})
		return data;
	}
	// 一级分类选择事件
	const HandleLeft = (index) => {
		LeftIndex.value = index;
		let item = categoryList.value[index];
		if(item && item.childs && item.childs.length > 0) {
			
		} else {
			uni.navigateTo({
				url: '/pages/Classify/Classify?categoryId='+ item.id
			})
		}
	}
	onLoad((e) => {
		getCategoryLists();
	})
	
	const toIndex = (item) => {
		uni.navigateTo({
			url: '/pages/Classify/Classify?categoryId='+ item.id
		})
	}
	
	
	
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		background-color: #F5F5F5;
		.ConentBox {
			width: 100vw;
			height: calc(100vh - 88rpx);
			display: flex;
			justify-content: space-between;

			.LeftBox {
				width: 180rpx;
				height: 100%;
				flex: 0 0  180rpx;

				.ScrollViewLeft {
					width: 180rpx;
					height: 100%;
					padding-top: 30.5rpx;

					.LeftListItem {
						width: 180rpx;
						height: 39rpx;

						display: flex;
						align-items: center;

						.BorderBox {
							width: 6rpx;
							height: 24rpx;
							flex-shrink: 0;
							border-radius: 0 4rpx 4rpx 0;
							background: var(--Style, #E5353F);
						}
						.BorderBoxNo{
							background-color: transparent;
						}

						.TextBox {
							
							font-family: "PingFang SC";
							font-size: 28rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
							margin-left: 20rpx;
						}
					}

					.LeftListItem:nth-child(n+2) {
						margin-top: 60rpx;
					}
				}
			}

			.RightBox {
				flex: 1;
				height: 98%;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;
				margin-right: 20rpx;
				.ScrollViewReft{
					// width: 570rpx;
					height: 100%;
					padding-top: 20rpx;
					.RightItemBox{
						
						.TitleBox{
							color: #000000;
							 font-family: "PingFang SC";
							 font-size: 20rpx;
							 font-style: normal;
							 font-weight: 400;
							 line-height: normal;
							 opacity: 0.5;
							 margin-left: 22rpx;
						}
						.ClassConentBox{
							width: calc(570rpx - 50rpx);
							
							margin-left: 22rpx;
							margin-top: 20rpx;
							display: grid;
							grid-template-columns: 1fr 1fr 1fr;
							.ClassListItemBox{
								width: 160rpx;
								height: 56rpx;
								flex-shrink: 0;
								border-radius: 8rpx;
								background: #F5F5F5;
								text-align: center;
								line-height: 56rpx;
								
								 color: #000000;
								 text-align: center;
								 font-family: "PingFang SC";
								 font-size: 26rpx;
								 font-style: normal;
								 font-weight: 400;
								 
								 opacity: 0.8;
							}
								.ClassListItemBox:nth-child(n+4){
									margin-top: 20rpx;
								}
						}
						
					}
					.RightItemBox:nth-child(n+2){
						margin-top: 20rpx;
					}
				}
			}
		}



	}
</style>